<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算机属性和监视</title>
</head>
<body>
<!--
 1、计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}} 来显示属计算的结果
 2、监视属性：
    通过vm对象的$watch()或watch配置来监听指定属性
    当属性调用者，回调函数自动调用，在函数内部计算
 3、计算属性高级
    通过getter/setter 实现对属性的监视和监听
    计算属性存在缓存，多次读取只执行一次getter计算!!!
 -->
<div id="demo">
    姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1(单项)：<input type="text" placeholder="Full Name1" v-model="fullName1" ><br>
    姓名2(单项)：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3(双项)：<input type="text" placeholder="Full Name3" v-model="fullName3">
    {{fullName1}}
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
 const vm =new Vue({
     el : '#demo',
     data: {
         firstName :'A',
         lastName :'B',
         fullName2 :''
     },
     computed : {
         //这里会感觉他跟方法差不多  其实效果是一样的，，不一样的是触发的时间，
         // computed只有只在相关响应式依赖发生改变时它们才会重新求值。
         //相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
         fullName1 () { //计算属性的一个方法
             // `this` 指向 vm 实例
             return this.firstName + ' '+ this.lastName
         },
         fullName3 :{
             get (){
                 return this.firstName + ' '+ this.lastName
             },
             set(value){
                 const names = value.split(' ')
                 this.firstName = names[0]
                 this.lastName = names[1]
             }
         }
     },
     watch: {
         firstName: function (newvalue,oldvalue){  //firstName发生了变化就执行下面的
             // this是vm对象
             this.fullName2 = newvalue + ' ' + this.lastName
         }
     }

 })
 vm.$watch('lastName',function (newvalue,oldvalue) { //现在可能觉得watch不实用，后面会有一个深度监视会用到
        this.fullName2 = this.firstName + ' ' + newvalue
 })

</script>
</body>
</html>